<template>
  <div class="viewS3DV">
    <contextmenu ref="contextmenu" @contextmenu='handelShow' :disabled='cMenueDisable' >
      <contextmenu-item :disabled='hideDisable' @click="handleHideClick" > 隐藏</contextmenu-item>
      <contextmenu-item :disabled='transparentDisable' @click="handleTransparentClick" >透明</contextmenu-item>
      <contextmenu-item :disabled='opaqueDisable' @click="handleOpaqueClick">非透明</contextmenu-item>
      <contextmenu-submenu :disabled='inverseDisable' title="反选">
        <contextmenu-item :disabled='transparentInverseDisable'  @click="handleTransparentInverseClick" >反选透明</contextmenu-item>
        <contextmenu-item :disabled='hideInverseDisable'  @click="handleHideInverseClick" >反选隐藏</contextmenu-item>
      </contextmenu-submenu>
      <contextmenu-item divider></contextmenu-item>
      <contextmenu-item  @click="handleShowAllClick" >显示所有</contextmenu-item>
    </contextmenu>
    <div class="s3dvview" ref='s3dvview' v-contextmenu:contextmenu >
      <viewTreeMain></viewTreeMain>
      <viewAttributeMain></viewAttributeMain>
      <!-- <viewAxis v-bind:S3DVApp='S3DVApp'></viewAxis> -->
      <div ref="viewAxis" class="viewAxis" />
    </div>  
  </div>
</template>

<script>
import {
    directive,
    Contextmenu,
    ContextmenuItem,
    ContextmenuSubmenu,
    ContextmenuGroup,
  } from 'v-contextmenu';
import 'v-contextmenu/dist/index.css';

// import viewAxis from '@/components/view/viewAxis.vue';
import viewTreeMain from '@/components/view/viewTreeMain.vue';
import viewAttributeMain from '@/components/view/viewAttributeMain';




import ComponentSignals from '@/utils/componentSignals';

//  const S3DV = require('@/assets/lib/s3dwebtookit.min.js');
//  let S3DVApp= new S3DV.S3DVApplication();
const s3dwebtookit = require('@/assets/lib/s3dwebtookit.min.js')
 let S3DVApp=new s3dwebtookit.S3DWebTookitAPI()
//  console.log(S3DVApp);
//  S3DVApp.setSceneBackGroundColor('mediumblue');


export default {
  name: 'viewS3DV',
  directives: {
      contextmenu: directive,
    },
  data(){
    return {
      S3DVApp:S3DVApp,
      cMenueDisable:false,
      hideDisable:false,
      transparentDisable:false,
      opaqueDisable:false,
      inverseDisable:false,
      transparentInverseDisable:false,
      hideInverseDisable:false
    }
  },
  
  components:
  {
    // viewAxis,
    viewTreeMain,
    viewAttributeMain,
    Contextmenu,
    ContextmenuItem,
    ContextmenuSubmenu,
    ContextmenuGroup,
  },


  mounted(){
    let container=this.$refs.s3dvview;
    // 声明坐标系
    const viewAxis = this.$refs.viewAxis
    S3DVApp.addViewPort(container, viewAxis, '')
    // S3DVApp.addViewPort(container); 
    S3DVApp.initScene();
    
    ComponentSignals.loadGeo.add(
            function (value) {
                S3DVApp.loadFile(value).then( 
                    ()=>{
                        ComponentSignals.loaderSegment.dispatch(false);    
                        ComponentSignals.updateTree.dispatch(S3DVApp.getTreeData());
                });
        });
    ComponentSignals.loadGeoGltfData.add(

            function (value) {
                S3DVApp.loadGltfData(value).then( 
                    ()=>{
                        ComponentSignals.loaderSegment.dispatch(false);    
                        ComponentSignals.updateTree.dispatch(S3DVApp.getTreeData());
                });
        }
        );

    ComponentSignals.loadGeoBlobData.add(

            function (value) {
                S3DVApp.loadBlobData(value).then( 
                    ()=>{
                        ComponentSignals.loaderSegment.dispatch(false);    
                        ComponentSignals.updateTree.dispatch(S3DVApp.getTreeData());
                });
        }
        );
    ComponentSignals.initView.add(()=>{
      S3DVApp.initScene();
    });
    ComponentSignals.clear.add(()=>
    {
      S3DVApp.clearView();
    });
    
    ComponentSignals.selectObjByName.add((name)=>
    {
        S3DVApp.selectObjectByName(name);
    });
    ComponentSignals.selectObjByUuid.add((uuid)=>
    {
      S3DVApp.selectObjectByUuid(uuid);
    });
    ComponentSignals.hideObjectByUuid.add((uuid)=>
    {
      S3DVApp.hideObjectByUuid(uuid);
    });
   ComponentSignals.unhideObjectByUuid.add((uuid)=>
    {
      S3DVApp.unhideObjectByUuid(uuid);
    });

    ComponentSignals.perspectiveSet.add((value)=>
    {
      S3DVApp.setCameraStatus(value);
    }
    );

    ///按住鼠标右键拖动菜单弹出问题修复
    container.addEventListener('mousedown',(event)=>{
            this.cMenueDisable=false;
        });

    container.addEventListener('mousemove',(event)=> {
          this.cMenueDisable=true;
        });


  
  },
  methods:{

    handelShow(){
      let obj=S3DVApp.getSelectObjectInfo();
      if  (obj.uuid !== undefined){
        switch(obj.type)
        {
          case 'Mesh':
            if (obj.status==="Opaque") {
              this.transparentDisable=false;
              this.opaqueDisable=true;
            } else {
              this.transparentDisable=true;
              this.opaqueDisable=false;
            }
            this.inverseDisable=false;
            this.transparentInverseDisable=false;
            this.hideInverseDisable=false;   
            break;
          case 'Group':
            if (obj.userData.ModelType === "dimension") {
              this.transparentDisable=true;
              this.opaqueDisable=true;
              this.inverseDisable=true;
              this.transparentInverseDisable=true;
              this.hideInverseDisable=true;   
            }
            break;
          default:
            this.hideDisable=false;
            this.transparentDisable=false;
            this.opaqueDisable=false;
            this.inverseDisable=false;
            this.transparentInverseDisable=false;
            this.hideInverseDisable=false; 
            break;  
        }
        this.hideDisable=false;
       
      }
      else{
        this.hideDisable=true;
        this.transparentDisable=true;
        this.opaqueDisable=true;
        this.inverseDisable=true;
        this.transparentInverseDisable=true;
        this.hideInverseDisable=true;   
      }
    },

    handleHideClick()
    {
      let obj=S3DVApp.getSelectObjectInfo();
      S3DVApp.hideObjectByUuid(obj.uuid);
    },
    handleTransparentClick()
    {
      let obj=S3DVApp.getSelectObjectInfo();
      S3DVApp.transparentObjectByUuid(obj.uuid);
    },
    handleOpaqueClick()
    {
      let obj=S3DVApp.getSelectObjectInfo();
      S3DVApp.opaqueObjectByUuid(obj.uuid);
    },

    handleTransparentInverseClick()
    {
      let obj=S3DVApp.getSelectObjectInfo();
      S3DVApp.transparentInverseObjectByUuid(obj.uuid);
    },
    handleHideInverseClick()
    {
      let obj=S3DVApp.getSelectObjectInfo();
      S3DVApp.hideInverseObjectByUuid(obj.uuid);
    },
    handleShowAllClick()
    {
      S3DVApp.showAll()
    }

  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .s3dvview
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
} */
.s3dvview
{   position: absolute;
    top: 0px;
    bottom: 0%;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index:0;
    /* background:-webkit-linear-gradient(#ffffff,#26b3eb); */
    background:-moz-linear-gradient(#ffffff,#26b3eb);/*Firefox3.6+*/
    background:-ms-linear-gradient(#ffffff,#26b3eb);/*InternetExplorer10*/
    background:-webkit-linear-gradient(#ffffff,#26b3eb);/*Safari5.1+,Chrome10+*/
    background:-o-linear-gradient(#ffffff,#26b3eb);/*ForOpera11.1to12.0*/
    background:linear-gradient(#ffffff,#26b3eb);/*Standardsyntax*/
}
.viewAxis
{
  position: absolute;
  width: 150px;
  height: 150px;
  right: 0%;
  top: -5%;
  z-index:0;
}
</style>
